<template>
  <div>
    <img class="nullImg" v-if="this.$store.state.car.length===0" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3981657600,563539646&fm=26&gp=0.jpg" alt="">
  <div class="singleCarItem flex" v-for="item in carItemList" @click="singleCarItemClick(item)">
    <div class="img">
      <img :src="item.img" alt="">
    </div>
    <div class="singleCarItemMain">
      <div class="title bold">{{item.title}}</div>
      <div class="price bold">
        <span>{{item.price}}</span>
        <span class="countThree">
          <span class="sub" @click.stop="sub(item)">-</span>
          <span class="theCount">{{item.count}}</span>
          <span class="add" @click.stop="add(item)">+</span>
        </span>

      </div>
      <div class="des">{{item.des}}</div>
    </div>
    <div class="remove" @click.stop="remove(item)">移除</div>
  </div>
  </div>
</template>

<script>
export default {
name: "carItem",
  props:{
    carItemList:{
      type:Array
    },
    count:{
      type:Number,
      default:1
    }
  },
  data(){
    return{

    }
  },
  methods:{
    remove(item){
      this.$store.commit("remove",item)
    },
    sub(item) {
      item.count--;
      if(item.count===0) {this.remove(item);console.log("数量减至0，商品["+item.id+item.title+"]被移除")}
    },
    add(item){item.count++;},
    singleCarItemClick(item){
      console.log("查看详情:["+item.id+item.title+"],"+"上一页面是:"+this.$route.path);
       this.$router.push("detail?id="+item.id)

    }
  }
}
</script>

<style scoped>
.singleCarItem{
  padding: .5rem;
  width: 95%;
  border: .1rem solid #FF4400;
  border-radius: .2rem;
  margin-bottom: .5rem;
}
.img img{
  width: 6rem;
  height: 6rem;
  margin-right: 1rem;
}
.singleCarItemMain{
  height: 6rem;
  width: 6rem;
  flex: 1;
}
.singleCarItemMain .des{
  height: 3rem;
  overflow: scroll;
  color: #a09b9b;
}
.remove{
  width: 3rem;
  height: 6rem;
  line-height: 6rem;
  text-align: center;
  margin-left: 1rem;
}
.price{
  color: #FF4400;
}
.price::before{
  content: "￥";
  color: #FF4400;
}
.theCount{
  font-size: 1rem;
  color: #7b7b7b;
}
.theCount::before{
  content: "x";
}
.sub,.add{
  color: #7b7b7b;
  background-color: #F4F4F4;
  padding: 0 .5rem;
}
.countThree{
  float: right;
}
.nullImg{
  width: 100%;
  height: 100%;
}
</style>